<script setup lang="ts">
import { ref } from 'vue'
import type {PhoneData} from '@/type/typings'
const props = defineProps<{
    showData:PhoneData
}>()

</script>

<template>
    <div class="phone-item" @click="$router.push(`/detail/${showData.id}?img=${showData.image}`)">
        <img :src="showData.image" alt="" class="item-img">
        <div class="item-box">
            <div class="item-title">
                <div class="item-icon">优选</div>
                <div class="item-name">{{ showData.fullName }}</div>
            </div>
            <div class="item-style">
                <div v-for="t in showData.tags">{{ t }} |</div>
            </div>
            <div class="item-price">
                <div class="now-price">
                    <span>￥</span>
                    <span>{{showData.salesPriceYuan  }}</span>
                </div>
                <div class="old-price">
                    <span>新机价</span>
                    <span>￥{{ showData.referencePriceYuan }}</span>
                </div>
            </div>
            <div class="item-card">
                <div v-for="s in showData.afterSaleLabel">{{ s }}</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.phone-item {
    width: 3.55rem;
    box-sizing: border-box;
    padding-left: 14px;
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: #fff;
    display: flex;
    margin-bottom: 10px;

    >img {
        width: .76rem;
        height: .8rem;
        margin-right: .15rem;
    }

    .item-box {
        .item-title {
            display: flex;
            height: 14px;
            align-items: center;

            .item-icon {
                width: 26px;
                height: 14px;
                font-size: 12px;
                background-color: var(--home-red);
                color: #fff;
                border-radius: 3px;
                text-align: center;
                line-height: 14px;
                margin-right: 4px;
            }

            .item-name {
                font-size: 13px;
                color: #000;
                font-weight: 500;
            }
        }

        .item-style {
            display: flex;
            font-size: 12px;
            color: #444;
            margin-top: 7px;


            >div {
                padding-right: 4px;
            }
        }

        .item-price {
            display: flex;
            margin-top: 9px;
        }

        .now-price {
            color: var(--home-red);
            font-size: 13px;
            font-weight: 800;
            font-style: italic;
        }

        .old-price {
            margin-left: 4px;

            span {
                padding-left: 4px;
            }
            span:nth-child(1) {
                color: #444;
                font-size: 12px;
            }
            span:nth-child(2) {
                color: #444;
                font-size: 12px;
                text-decoration: line-through;
            }
        }

        .item-card {
            display: flex;
            margin-top: 9px;

            >div {
                font-size: 12px;
                color: #39d09d;
                border-radius: 3px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                padding: 0 2px;
                margin-right: 3px;
                border: 1px solid #39d09d;

            }
        }

    }


}
</style>